import styled from 'styled-components'


const CatelistContainer = styled.div`

  display:flex;

  div:first-child{
    width:1.85rem;
    background:#f3f3f3;
    min-height: 10.5rem;
    ul{
      li {
        line-height:0.9rem;
        text-align:center;
      }
      .active{
        background:white;
        color:#c7835c;
        position:relative;
        &::after{
          content:"";
          position:absolute;
          bottom:0;
          left:0.6rem;
          height:0.02rem;
          width:0.56rem;
          background:orange;
        }
      }
    }
  }

  div:last-child{
    flex:1;
    background:white;
    ul {
      display:flex;
      flex-wrap:wrap;
      li {
        list-style:none;
        text-align:center;
        line-height:0.85rem;
        width:33%;
      }
    }
  }

`


export default CatelistContainer;